<template>
	<view class="detail-container">
		<u-tabs :list="list" @click="sectionChange" :current="current"></u-tabs>
		<!-- <u-subsection :list="list" :current="current"  @change="sectionChange" activeColor="#d4237a"></u-subsection> -->
		<view v-if="current==0">
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(goodsItem,index) in goodsItem.images" :key="index">
					<image :src="`http:${goodsItem}`" mode="" class="image" @click="previewImg(index)"></image>
				</swiper-item>

			</swiper>
		</view>
		<view v-if="current==1">
			<rich-text :nodes="goodsItem.bodys"></rich-text>
		</view>
		<view v-if="current==2">
			<view class="">
				商品评价({{reviewTotal}})
			</view>
			<!-- 商品评价列表 -->
			<view class="comment-list">
				<!-- 商品评价列表项 -->
				<view class="comment-item" v-for="(item,index) in reviewList" :key="index">
					<view class="comment-item-1">
						<!-- 头像 -->
						<view class="">
							<u-avatar :src="`http:${item.head}`"></u-avatar>
						</view>
						<view class="nickName">
							<text>{{item.nickname}}</text>
						</view>
					</view>
					<view class="comment-item-2">
						<text>{{item.content}}</text>
					</view>
					<view class="comment-item-3">
						<text>{{item.times}}</text>
					</view>
				</view>
			</view>
			<view class="isNext">
				<u-button text="查询更多评论" v-if="isNext"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
					@click="nextReviews"></u-button>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="bottom_nav">
			<uni-goods-nav :options="options" :button-group="buttonGroup" :fill="true" @buttonClick="buttonClickHandle" @click="navClickHandle"></uni-goods-nav>
		</view>
		
		<u-popup :show="showPopup" @close="closePopup">
			<view class="pop-box">
				<!-- 商品基本信息区域 -->
				<view class="product-basic-box">
					<view class="image-box">
						<image v-if="goodsItem.images" :src="`http:${goodsItem.images[0]}`" class="coverImage"></image>
					</view>
					<view class="main-box">
						<view class="main-box-1">
							<view class="">
								<text>{{goodsItem.title}}</text>
							</view>
							<view class="">
								<u-icon name="close" @click="showPopup=false"></u-icon>
							</view>
						</view>
						<view class="main-box-1">
							<view class="">
								<text>{{goodsItem.price}}</text>
							</view>
							<view class="">
								<text>商品编号:{{goodsItem.gid}}</text>
							</view>
						</view>
					</view>
					
					
				</view>
			
				<!-- 商品规格信息区域 -->
				<view class="product-spec-box">
					<view class="product-spec-item" v-for="(item,index) in specList" :key="index">
						<view class="product-spec-title"> 
							{{item.title}}
						</view>
						<view class="prodct-spec-main">
							<view :class="{'product-spec-main-item':true,active:activeAry.includes(subItem.value)}" 
							v-for="(subItem,sindex) in item.values" 
							:key="sindex"
							@click="selectItem(item,subItem)">{{subItem.value}}</view>
						</view>
					</view>
				</view>
				<!-- 商品数量区域 -->
				<view class="product-num-box">
					<view>
						商品数量
					</view>
					<view>
						<u-number-box v-model="cartItem.count"></u-number-box>
					</view>
				</view>
				<view class="submit-box">
					<u-button type="error" class="submit" @click="submitAddShopcart">确定</u-button>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapMutations,mapGetters}=createNamespacedHelpers('shopcart')
	const {mapState:mapUserState,mapActions:mapUserActions}=createNamespacedHelpers('users')
	export default {
		data() {
			return {
				//定义一个map集合
				activeMap:new Map(),
				activeAry:[],
				showPopup:false,
				options: [{
						text: '收藏',
						icon: 'star'
					},
					{
						text: '购物车',
						icon: 'cart',
						info: 0
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				goodsItem: {},
				list: [{
						name: '商品'
					},
					{
						name: '详情'
					},
					{
						name: '评价'
					}
				],
				current: 0,
				page: 1, //当前页
				reviewList: [], //获取评论信息集合
				reviewTotal: 0,
				isNext: false,
				specList:[],
				cartItem:{
					count:1
				}
			}
		},
		computed:{
			...mapGetters(['shopcartLen']),
			...mapUserState(['userInfo','authToken'])
		},
		watch:{
			shopcartLen:{
				handler(arg){
					console.log('arg',arg);
					const result=this.options.find(item=>item.text=="购物车")
					result.info=arg
				},
				immediate:true
			}
		},
		methods: {
			...mapMutations(['addToShopcartSync']),
			...mapUserActions(['safeLogoutAsync']),
			selectItem(arg1,arg2){
				if(this.activeMap.get(arg1.title)===arg2.value){
					this.activeMap.delete(arg1.title)
				}else{
					this.activeMap.set(arg1.title,arg2.value)
				}
				//获取map的值集合
				const values=this.activeMap.values()
				//将值集转成数组
				this.activeAry=Array.from(values)
				
			},
			async getGoodInfo(gid) {
				const result = await uni.$api.homeModules.getGoodsInfoApi(gid)
				this.goodsItem = result.data.data
			},
			sectionChange(arg) {
				this.current = arg.index;
			},
			previewImg(index) {
				uni.previewImage({
					urls: this.goodsItem.images.map(item => `http:${item}`),
					current: index
				})
			},
			//查询评论信息
			async getReviews(data) {
				const result = await uni.$api.homeModules.getReviewsApi(data)
				console.log('result', result);
				if (result.data.data != "没有数据") {
					this.reviewList = [...this.reviewList, ...result.data.data]
					this.reviewTotal = result.data.pageinfo.total
					if (result.data.pageinfo.page == result.data.pageinfo.pagenum) {
						this.isNext = false
					} else {
						this.isNext = true
					}
				} else {
					this.isNext = false
				}
			},
			//查询更多评论
			nextReviews() {
				this.page++
				const data = {
					gid: this.goodsItem.gid,
					page: this.page
				}
				this.getReviews(data)
			},
			buttonClickHandle(arg){
				switch(arg.index){
					case 0:
						this.addShopCart();
					break;
				}
			},
			addShopCart(){
				this.getSafe()
				//显示弹出框
				this.showPopup=true
			},
			closePopup(){
				this.showPopup=false
			},
			async getProductSpec(gid){
				const result=await uni.$api.homeModules.getProductSpecByGidApi(gid)
				this.specList=result.data.data
			},
			submitAddShopcart(){
				//关闭弹框
				this.showPopup=false
				if(this.goodsItem.images){
					const entrys=this.activeMap.entries()
					const params=[]
					for(let entry of entrys){
						params.push(`${entry[0]}:${entry[1]}`)
					}
					this.cartItem={
						
						...this.goodsItem,
						coverImg:`http:${this.goodsItem.images[0]}`,
						count:this.cartItem.count,
						params,
						checked:true,
					}
					delete this.cartItem.images
					delete this.cartItem.bodys
					delete this.cartItem.sales
					console.log('购物车对象',this.cartItem);
					//调用vuex中mutations中的加入购物车的方法
					this.addToShopcartSync(this.cartItem)
				}
			}
			,async navClickHandle(arg){
				if(arg.index==1){
					console.log('-------------我是-----------');
					const flag=await this.getSafe()
					if(flag){
						uni.switchTab({
							url:'/pages/shopcart/shopcart'
						})
					}
					
				}
			},
			async getSafe(){
				const result=await uni.$api.mineModules.safeApi({uid:this.userInfo.uid,auth_token:this.authToken})
				if(result.data.status==0){
					this.safeLogoutAsync(this.userInfo.uid)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					return true
				}
			}
		},
		onLoad(options) {
			this.getGoodInfo(options.gid)
			//首次加载的时候调用
			this.getReviews({
				gid: options.gid,
				page: this.page
			})
			this.getProductSpec(options.gid)

		}
	}
</script>

<style lang="scss">
	.detail-container {
		display: flex;
		flex-direction: column;	
		//align-items: center;
		.swiper {
			width: 750rpx;
			height: 750rpx;
			.image {
				width: 100%;
				height: 100%;
			}
		}

		.comment-list {
			.comment-item {
				font-size: 24rpx;
				margin: 10rpx;
				background-color: #f5f5f5;
				padding: 10rpx;

				.comment-item-1 {
					display: flex;
					align-items: center;

					.nickName {
						margin-left: 10rpx;
					}

				}
			}
		}
	}
	.bottom_nav{
		width: 750rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		
	}
	.pop-box{
		font-size: 28rpx;
		width: 750rpx;
		padding-bottom: 20rpx;
		.product-basic-box{
			display: flex;
			height:120rpx;
			border-bottom: 2rpx solid #ccc;
			.image-box{
				height: 100%;
				display: flex;
				align-items: center;
				margin-left: 10rpx;
				.coverImage{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.main-box{
				box-sizing: border-box;
				flex: 1;
				height: 100%;
				padding: 10rpx;
				.main-box-1{
					line-height: 46rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		
		
		.product-spec-box{
			.product-spec-item{
				margin: 10rpx;
				font-size: 32rpx;
				line-height: 68rpx;
				.product-spec-title{
					
				}
				.prodct-spec-main{
					display: flex;
					.product-spec-main-item{
						background-color: #f5f5f5;
						padding: 10rpx;
						margin: 10rpx;
						border-radius: 10rpx;
					}
					.active{
						background-color:orange;
						color: white;
					}
				}
			}
		}
		.product-num-box{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		}
		.submit-box{
			padding: 20rpx;
		}
	}
	
</style>